<template>
  <div class="storage-edit">
    <div class="page-header">
      <h2>{{ isEdit ? '编辑存储源' : '添加存储源' }}</h2>
      <el-button @click="goBack">返回</el-button>
    </div>
    
    <el-card>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="存储源名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入存储源名称" />
        </el-form-item>
        
        <el-form-item label="存储源别名" prop="key">
          <el-input v-model="form.key" placeholder="用于URL中展示" />
        </el-form-item>
        
        <el-form-item label="存储源类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择存储源类型" style="width: 100%">
            <el-option label="本地存储" value="local" />
            <el-option label="阿里云 OSS" value="aliyun" />
            <el-option label="腾讯云 COS" value="tencent" />
            <el-option label="七牛云" value="qiniu" />
            <el-option label="S3" value="s3" />
            <el-option label="OneDrive" value="onedrive" />
            <el-option label="Google Drive" value="google-drive" />
            <el-option label="FTP" value="ftp" />
            <el-option label="SFTP" value="sftp" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="是否启用">
          <el-switch v-model="form.enable" />
        </el-form-item>
        
        <!-- 根据不同类型显示不同的配置项 -->
        <template v-if="form.type === 'local'">
          <el-form-item label="文件路径" prop="filePath">
            <el-input v-model="form.storageSourceAllParam.filePath" placeholder="请输入文件路径" />
          </el-form-item>
        </template>
        
        <template v-if="form.type === 'aliyun'">
          <el-form-item label="AccessKeyId" prop="accessKeyId">
            <el-input v-model="form.storageSourceAllParam.accessKeyId" placeholder="请输入AccessKeyId" />
          </el-form-item>
          <el-form-item label="AccessKeySecret" prop="accessKeySecret">
            <el-input v-model="form.storageSourceAllParam.accessKeySecret" type="password" placeholder="请输入AccessKeySecret" />
          </el-form-item>
          <el-form-item label="Bucket" prop="bucket">
            <el-input v-model="form.storageSourceAllParam.bucket" placeholder="请输入Bucket名称" />
          </el-form-item>
          <el-form-item label="Endpoint" prop="endpoint">
            <el-input v-model="form.storageSourceAllParam.endpoint" placeholder="请输入Endpoint" />
          </el-form-item>
        </template>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">保存</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { adminApi } from '@/api'

const router = useRouter()
const route = useRoute()

const formRef = ref(null)
const submitting = ref(false)
const storageId = computed(() => route.params.id)

const isEdit = computed(() => !!storageId.value)

const form = reactive({
  id: null,
  name: '',
  key: '',
  type: 'local',
  enable: true,
  storageSourceAllParam: {}
})

const rules = {
  name: [{ required: true, message: '请输入存储源名称', trigger: 'blur' }],
  key: [{ required: true, message: '请输入存储源别名', trigger: 'blur' }],
  type: [{ required: true, message: '请选择存储源类型', trigger: 'change' }]
}

onMounted(async () => {
  if (isEdit.value) {
    await loadStorageDetail()
  }
})

const loadStorageDetail = async () => {
  try {
    const res = await adminApi.getStorageDetail(storageId.value)
    if (res.data) {
      Object.assign(form, {
        id: res.data.id,
        name: res.data.name,
        key: res.data.key,
        type: res.data.type?.value || res.data.type,
        enable: res.data.enable
      })
      
      // 处理存储源参数
      if (res.data.storageSourceAllParam) {
        form.storageSourceAllParam = { ...res.data.storageSourceAllParam }
      } else {
        form.storageSourceAllParam = {}
      }
    }
  } catch (error) {
    ElMessage.error('加载存储源详情失败')
  }
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (!valid) return
    
    submitting.value = true
    try {
      const submitData = {
        id: form.id,
        name: form.name,
        key: form.key,
        type: form.type,
        enable: form.enable,
        storageSourceAllParam: form.storageSourceAllParam
      }
      
      await adminApi.saveStorage(submitData)
      ElMessage.success(isEdit.value ? '更新成功' : '添加成功')
      router.push('/admin/storage')
    } catch (error) {
      ElMessage.error('保存失败')
    } finally {
      submitting.value = false
    }
  })
}

const goBack = () => {
  router.push('/admin/storage')
}
</script>

<style lang="scss" scoped>
.storage-edit {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
    }
  }
}
</style>

